<template>
  <div>
    <div class="login-page">
      <div class="login-page-form">
        <div class="form-layer shadow three"></div>
        <div class="form-layer shadow two"></div>
        <div class="form-layer shadow one">
          <div class="adv-content">
            <p class="title">HPC账务平台</p>
            <p class="sub-title">——出品</p>
          </div>
        </div>
        <div class="form-layer content">
          <div class="logo">
            <span>peace</span>
          </div>
          <n-form ref="formRef" :model="formInline" :rules="rules">
            <n-form-item label="用户名">
              <n-input v-model:value="formInline.loginName" placeholder="请输入用户名" />
            </n-form-item>
            <n-form-item label="密 码">
              <n-input
                v-model:value="formInline.password"
                type="password"
                placeholder="请输入密码"
              />
            </n-form-item>
            <n-form-item label="验证码">
              <n-grid :cols="2" :x-gap="28">
                <n-gi span="1">
                  <n-input v-model:value="formInline.code" placeholder="请输入验证码" />
                </n-gi>
                <n-gi span="1">
                  <img :src="res" alt="" style="width: 200px; height: 35px" />
                </n-gi>
              </n-grid>
            </n-form-item>
            <n-grid :cols="2" :x-gap="28">
              <n-gi span="1"> </n-gi>
              <n-gi span="1">
                <a class="changeMessage" @click="change" style="font-size: 12px"
                  >看不清楚，换一张</a
                >
              </n-gi>
            </n-grid>
            <n-form-item :wrapper-col="{ span: 22, offset: 6 }" style="margin-top: -15px">
              <n-button
                type="primary"
                @click="handleSubmit"
                style="width: 100%"
                :keyboard="true"
                :loading="isLoading"
                >登 录</n-button
              >
            </n-form-item>
          </n-form>
          <n-space justify="right" style="margin-top: -10px">
            <Forget />
          </n-space>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  readonly,
  toRaw,
  onUnmounted,
  ref,
  onCreated,
} from 'vue';

import { TweenMax } from 'gsap';
import { useMessage } from 'naive-ui';
import { useUserStore } from '@/store/modules/user';
import { useRoute, useRouter } from 'vue-router';
import { ResultEnum } from '@/enums/httpEnum';
import Forget from '@/components/modal/forget.vue';
import loading from 'naive-ui/lib/_internal/loading';
import md5 from 'js-md5';
import { getCaptcha } from '@/api/system/captcha';
import { func } from 'vue-types';

const userStore = useUserStore();

const router = useRouter();
const route = useRoute();
const isLoading = ref(false);
interface FormState {
  loginName: string;
  password: string;
  code: string;
}

const formRef = ref();

const message = useMessage();

// const formInline = ref({
//   loginName: 'z13823319294@163.com',
//   password: 'z8069113',
//   code: '',
// });
// const formInline = ref({
//   loginName: '1550321223@qq.com',
//   password: 'wU2rKEjq',
//   code: '',
// });
const formInline = ref({
  loginName: '',
  password: '',
  code: '',
});

const enterDown = {
  login(e) {
    // debugger
    window.addEventListener('keydown', enterDown.login);
    if (e.code === 'Enter') {
      if (formInline.value.code) {
        handleSubmit();
        window.removeEventListener('keydown', enterDown.login, false);
      } else {
        window.removeEventListener('keydown', enterDown.login, false);
      }
    }
  },
};
const enterUp = {
  login(e) {
    window.addEventListener('keydown', enterDown.login);
  },
};
const res = ref();
onMounted(async () => {
  window.addEventListener('keydown', enterDown.login);
  window.addEventListener('keyup', enterUp.login);
  let data = await getCaptcha();
  console.log(data);
  localStorage.setItem('uuid', data?.data.body.uniqueId);
  res.value = 'data:img/png;base64,' + data?.data.body.validatePicture; // delivery_asn=1

  TweenMax.to('.login-page-form', 1, {
    top: '30%',
    right: '10%',
    opacity: 1,
    delay: 0.8,
  });
});

// 看不清楚换一张
async function change() {
  localStorage.clear();
  formInline.value.code = '';
  let data = await getCaptcha();
  console.log(data);
  localStorage.setItem('uuid', data.data.body.uniqueId);
  res.value = 'data:img/png;base64,' + data.data.body.validatePicture; // delivery_asn=1
}
// const doLogin = (e: any) => {};

const handleSubmit = (e) => {
  isLoading.value = true;
  formRef.value.validate(async (errors) => {
    if (!formInline.value.loginName) {
      console.log(formInline);
      message.error('登录名不能为空');
    } else if (!formInline.value.password) {
      message.error('密码不能为空');
    } else if (!formInline.value.code) {
      message.error('验证码不能为空');
    } else {
      const { loginName, password, code } = formInline;
      // message.loading('登录中...');
      loading.value = true;
      isLoading.value = true;
      const params: FormState = {
        loginName,
        password,
        code,
      };
      let uuid = localStorage.getItem('uuid');
      console.log(uuid);
      formInline.value.password = md5(formInline.value.password);
      const { data, message: msg } = await userStore.login({ ...formInline.value, uuid });
      if (data.sysHead.retCd !== '000000') {
        message.error(data.sysHead.retInf);
        change();
        isLoading.value = false;
      }
      if (data.sysHead.retCd === '000000') {
        const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
        message.success('登录成功！');
        isLoading.value = false;
        router.replace(toPath).then((_) => {
          if (route.name == 'login') {
            router.replace('/');
          }
        });
      } else {
        message.info(msg || '登录失败');
        isLoading.value = false;
      }
    }
  });
  isLoading.value = false;
};
// const onAuthCode = () => {
//   formInline.isCaptcha = true;
// };
</script>

<style lang="scss">
.changeMessage:hover {
  text-decoration: underline;
}
.login-page {
  display: flex;
  background-color: #4671dd;
  height: 100vh;
  flex: 1;
  flex-direction: row;
  position: relative;

  .login-page-form {
    width: 880px;
    height: 300px;
    position: absolute;
    right: 50px;
    bottom: 50px;
    opacity: 0;

    .form-layer {
      border-radius: 5px;
      position: absolute;
    }

    .form-layer.shadow {
      width: 100%;
      height: 300px;
    }

    .form-layer.three {
      top: 24px;
      left: 24px;
      background-color: #4b76e1;
      z-index: 1;
      opacity: 0.85;
    }

    .form-layer.two {
      top: 12px;
      left: 12px;
      background-color: #5785ed;
      z-index: 2;
      opacity: 0.95;
    }

    .form-layer.one {
      display: flex;
      background-color: #6b9afa;
      z-index: 3;
      opacity: 0.8;

      .adv-content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 40px;

        .title {
          font-size: 35px;
          font-style: italic;
          color: #fff;
          font-weight: 700;
          -webkit-box-reflect: below 8px -webkit-linear-gradient(transparent, transparent 40%, rgba(255, 255, 255, 0.3));
        }

        .sub-title {
          font-size: 14px;
          color: #fff;
          font-weight: 500;
          margin-left: 280px;
          margin-top: 30px;
        }
      }
    }

    .form-layer.content {
      right: 30px;
      top: -80px;
      background-color: #fff;
      z-index: 100;
      width: 300px;
      height: 420px;
      padding: 0px 18px;

      .logo {
        line-height: 70px;
        width: 200px;
        height: 70px;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        margin: 27px auto 31px;
        color: #4b76e1;
        font-size: 4em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-weight: 900;
        font-style: italic;
        padding-top: 0px;
        padding-right: 6px;
      }
    }
  }
}
</style>
